<template>
    <div class="goods-style">
       
        <bi-form-item label="商品背景颜色" >
            <bi-color v-model="form.backgroundColor"></bi-color>
        </bi-form-item>

        <bi-form-item label="商品圆角" >
            <input-size v-model="form.radius" ></input-size>
        </bi-form-item>
        <bi-form-item label="商品留白" >
            <input-size v-model="form.padding" ></input-size>
        </bi-form-item>
        <bi-form-item label="标题显示行数" >
            <bi-select v-model="form.titleShowRow" :clear="false">
                <bi-select-option value="1" label="1行" ></bi-select-option>
                <bi-select-option value="2" label="2行" ></bi-select-option>
                <bi-select-option value="3" label="3行" ></bi-select-option>
                <bi-select-option value="auto" label="全部显示" ></bi-select-option>
            </bi-select>
        </bi-form-item>
    </div>
</template>

<script>
import fieldMixin from  '@@/admin/assets/bi-plug/fieldMixin.js';
import inputSize from './input-size.vue';
export default {
    components:{
        inputSize
    },
    mixins:[fieldMixin],
    data(){
        let form = {
            detail:'title,price,btn',
            backgroundColor:'#FFFFFF',
            radius:'10px',
            padding:'10px',
            titleShowRow:'1',
            
        }
        

        let pricePrefixOption = [
            {value:'normal',label:'正常'},
            {value:'small',label:'小标'},
            {value:'no',label:'不显示'}
        ]
        
        let originalPriceStyleOption = [
            {label:'正常',value:'normal'},
            {label:'删除线',value:'line-through'},
        ]
        

        this.$assign(form,this.modelValue);
       

        let alignOption = [
            {label:'左对齐',value:'left'},
            {label:'居中',value:'center'},
            {label:'右对齐',value:'right'},
        ]

        let weightOption = [
            {label:'正常',value:'normal'},
            {label:'粗体',value:'bold'},
        ]

        return {
            form,
            alignOption,
            weightOption,
            pricePrefixOption,
            originalPriceStyleOption,
           
        }
    },
    watch:{
        form:{
            handler(val){
                this.$emit('update:modelValue',val);
            },
            deep:true,
            immediate:true
        },
        modelValue(val){
            this.$assign(this.form,val);
        }
    },
    props:{
        modelId:{
            type:String,
            default:''
        }
    },
    methods:{
        
    }
}
</script>

<style>
.goods-style-collapse .bi-collapse-header{
    margin-bottom: 10px;
    padding-left: 0;
}
</style>